<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style>
<!--
.am-form input[type='text'], .am-form input[type='password'] {
	line-height: 1.1;
}
-->
</style>
<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav">
		<a id="window-back" href="javascript:void(0)" data-am-offcanvas> <i
			class="am-icon-chevron-left"></i> <span class="am-header-nav-title">下单</span>
		</a>
	</div>
	<h1 class="am-header-title"></h1>
</header>

<div style="height: 15px"></div>

<!-- register form -->
<div class="am-g">
	<div class="am-u-md-12 am-u-sm-centered">
		<form class="am-form my-form">
			<fieldset class="am-form-set">
				<div class="am-form-group">
					<input id="vehicleOwnerName" name="vehicleOwnerName" type="text"
						placeholder="车主姓名" required>
				</div>
				<div class="am-form-group">
					<input id="mobile" type="text" name="mobile" placeholder="车主手机号"
						data-validation-message="手机格式不正确"
						pattern="^1((3|5|8){1}\d{1}|70)\d{8}$" required>
				</div>
				<div class="am-form-group">
					<input name="carTypeCode" type="text" value="${carTypeCode}"
						placeholder="车型编号" disabled="disabled">
				</div>
				<div class="am-form-group">
					<input id="productName" name="productName" type="text"
						placeholder="产品名称" required>
				</div>
				<div class="am-form-group">
					<input id="productColour" name="productColour" type="text"
						placeholder="产品颜色" required>
				</div>
				<div class="am-form-group">
					<textarea id="descrn" name="descrn" placeholder="备注"></textarea>
				</div>
				<c:if test="${category=='mats'}">
					<div class="am-form-group">
						<label class="am-checkbox-inline" style="width: 150px"> <input id="footcheckbox"
							type="checkbox" name="append" value="footAppend" data-am-ucheck required minchecked="1"> 脚垫下单
						</label>
					</div>
					<div class="am-form-group">
						<label class="am-checkbox-inline" style="width: 150px"> <input id="tailcheckbox" 
							type="checkbox" name="append" value="tailAppend" data-am-ucheck> 尾箱垫下单
						</label>
						<c:if test="${model.isHatchback=='Y'}">
							<label class="am-radio-inline am-hide hatchbackGroup"> <input
								type="radio" name="hatchback" value="two" data-am-ucheck>
								两厢
							</label>
							<label class="am-radio-inline am-hide hatchbackGroup"> <input
								type="radio" name="hatchback" value="three" data-am-ucheck>
								三厢
							</label>
						</c:if>
					</div>
				</c:if>
			</fieldset>
			<button id="submitBtn" type="button"
				class="am-btn am-btn-success am-btn-block">确定下单</button>
		</form>
	</div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="order-alert">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">下单成功</div>
		<div class="am-modal-bd">您的订单号为:<span id="alertOrderNo"></span></div>
		<div class="am-modal-footer">
			<span id="cancelAlert" class="am-modal-btn">确定</span>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {

		$('.am-form')
				.validator(
						{
							onValid : function(validity) {
								$(validity.field).closest('.am-form-group')
										.find('.am-alert').hide();
							},

							onInValid : function(validity) {
								var $field = $(validity.field);
								var $group = $field.closest('.am-form-group');
								var $alert = $group.find('.am-alert');
								// 使用自定义的提示信息 或 插件内置的提示信息
								var msg = $field.data('validationMessage')
										|| this.getValidationMessage(validity);

								if (!$alert.length) {
									$alert = $(
											'<div class="am-alert am-alert-danger"></div>')
											.hide().appendTo($group);
								}

								$alert.html(msg).show();
							}
						});
		
		$('#tailcheckbox').change(function(){
			if($(this).attr("checked")){
				$("input[name='hatchback']:eq(0)").attr("checked",'checked');
				$(".hatchbackGroup").removeClass('am-hide');
			}else{
				$(".hatchbackGroup").addClass('am-hide');
				$("input[name='hatchback']").uCheck('uncheck');
			}
		});

		
		$('#submitBtn').click(function(){
			if($('.am-form').data('amui.validator').isFormValid()){
				var footAppend = $('#footcheckbox').attr('checked');
				var tailAppend = $('#tailcheckbox').attr('checked');
				$.post('mobile/submitOrder', {
					mobile : $('#mobile').val(),
					carTypeCode: '${carTypeCode}',
					vehicleOwnerName: $('#vehicleOwnerName').val(),
					productName: $('#productName').val(),
					productColour: $('#productColour').val(),
					descrn: $('#descrn').val(),
					footAppend: footAppend,
					tailAppend: tailAppend,
					hatchback: $("input[name='hatchback']:checked").val()
				}, function(result) {
					if (result.code == 'ACK') {
						if(result.message == 'errorMsg'){
							showAlert(result.data);
						}else{
							$('#alertOrderNo').text(result.data.orderNo);
							$('#order-alert').modal();
						}
					}
				}, 'json');
			}
		});
		
		$('#cancelAlert').click(function(){
			location.href="mobile/selection";
		});

	});
</script>